<template>
  <div class="bg">
    <!-- <div class="re"></div> -->
    <div class="userImageDiv">
      <div class="userImage">
        <img :src="merchantInfo.publicityImgList[0]||'../../assets/images/logo@2x.png'" width="100%" />
      </div>
      <span class="userName">{{merchantInfo.name||'云车服中心'}}</span>
    </div>
    <van-tabs v-model="active" @change="chooseKind" sticky swipeable animated lazy-render>
      <van-tab title="全部">
        <DiscountList @nowGet="nowGet" :list="list" useStatues="unclaimed" />
      </van-tab>
      <van-tab title="满减">
        <DiscountList @nowGet="nowGet" :list="reciveList" useStatues="unclaimed" />
      </van-tab>
      <van-tab title="立减">
        <DiscountList @nowGet="nowGet" :list="knockList" useStatues="unclaimed" />
      </van-tab>
      <van-tab title="折扣">
        <DiscountList @nowGet="nowGet" :list="discountList" useStatues="unclaimed" />
      </van-tab>
    </van-tabs>
    <van-action-sheet v-model="popShow" :round="false">
      <div class="sheetCancelBtn" @click="sheetCancelBtn">
        <img src="../../assets/images/取消@2x.png" width="100%" />
      </div>
      <div class="actionSheetContent">
        <div class="inputStyle">
          <span class="actionSheetContentTitle">
            <span style="color:red">*</span>手机号
          </span>
          <input type="text" class="phone" placeholder="输入手机号" v-model="tel" />
        </div>
        <div class="inputStyle">
          <span class="actionSheetContentTitle">
            <span style="color:red">*</span>验证码
          </span>
          <input type="text" class="code" placeholder="输入验证码" v-model="code" />
          <span class="inputMethodStyle" @click="time==0?sendCode():ap()">
            <span v-if="time==0">发送验证码</span>
            <span v-if="time>0">{{time}}s</span>
          </span>
        </div>
        <div class="inputStyle">
          <span class="actionSheetContentTitle">
            <span style="color:red">*</span>车牌号
          </span>
          <!-- <span class="catNumTwo">
            <input type="text" class="catNum" />
            <span class="catNumI"></span>
          </span>-->
          <div class="catNumTwoInput">
            <div
              class="leftInput"
              :class="noCar?'dis':''"
              @click="!noCar?popcatCodeLeft():nc()"
            >{{ leftCatCode }}</div>
            <span class="catNumI"></span>
            <div
              class="rightInput"
              :class="noCar?'dis':''"
              @click="!noCar?popcatCodeRight():nc()"
            >{{ rigthCatCode }}</div>
          </div>
          <span class="inputMethodStyle" @click="noCat">无车/无牌</span>
        </div>
        <button @click="confirmButton">确定</button>
      </div>
    </van-action-sheet>
    <div class="backTop">
      <!-- <div @click="rightShare">
        <img src="../../assets/images/分享@2x.png" width="100%" />
      </div> -->
      <div @click="backTop">
        <img src="../../assets/images/置顶@2x.png" width="100%" />
      </div>
    </div>
    <!-- 车辆地区自定义键盘 -->
    <van-action-sheet v-model="leftCatCodeShow" :round="false">
      <div class="leftCatCodeContent">
        <div class="contentHead"></div>
        <div class="ensure">
          <div class="ensureBtn" @click="leftCatCodeEnsure">确定</div>
        </div>
        <div class="item">
          <div
            v-for="item in province"
            :key="item"
            @click="activeleftCatCodeIndex = item"
            :class="activeleftCatCodeIndex == item ? 'activeStyle' : ''"
          >{{item}}</div>
          <div class="clear" @click="activeleftCatCodeIndex = -1">
            <div class="clearIcon">
              <img src="../../assets/images/qingchu.png" style="width:100%" />
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <!-- 车辆号码弹出框 -->
    <van-action-sheet v-model="rightCatCodeShow" :round="false">
      <div class="rightCatCodeContent">
        <div class="numList">
          <div
            v-for="item in rigthCode.numList"
            :key="item"
            @click="rightCatCodeClick(item)"
            :class="rigthCode.activeItem==item?'activeStyle':''"
          >{{ item }}</div>
        </div>
        <div class="EngOne">
          <div
            v-for="item in rigthCode.EngOne"
            :key="item"
            @click="rightCatCodeClick(item)"
            :class="rigthCode.activeItem==item?'activeStyle':''"
          >{{ item }}</div>
        </div>
        <div class="EngTwo">
          <div
            v-for="item in rigthCode.EngTwo"
            :key="item"
            @click="rightCatCodeClick(item)"
            :class="rigthCode.activeItem==item?'activeStyle':''"
          >{{ item }}</div>
        </div>
        <div class="EngThree">
          <div
            v-for="item in rigthCode.EngThree"
            :key="item"
            @click="rightCatCodeClick(item)"
            :class="rigthCode.activeItem==item?'activeStyle':''"
          >{{ item }}</div>
          <div
            class="clear"
            @click="rightCatCodeClick('clear')"
            :class="rigthCode.activeItem=='clear'?'activeStyle':''"
          >
            <div class="clearIcon">
              <img src="../../assets/images/qingchu.png" style="width:100%" />
            </div>
          </div>
        </div>
        <div class="CN">
          <div
            v-for="item in rigthCode.CN"
            :key="item"
            @click="rightCatCodeClick(item)"
            :class="rigthCode.activeItem==item?'activeStyle':''"
          >{{ item }}</div>
          <div class="btn" @click="codeEnsure">确定</div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import DiscountList from "../../components/DiscountList";
import Vue from "vue";
import { Toast } from "vant";
import { Dialog } from "vant";
Vue.use(Dialog);
Vue.use(Toast);
export default {
  components: {
    DiscountList,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      merchantInfo:'',
      noCar: false,
      time: 0,
      plateNum: "", //车牌号
      code: "", //验证码
      tel: "", //电话号码
      active: 0, //tabs激活下标
      list: [], //优惠券列表
      popShow: localStorage.getItem("loginState") != 1 ? true : false, //底部弹窗状态
      rightShow: false, //右侧分享与置顶状态
      merchantCode: 31000001, //商家编码
      reciveDiscountID: "", //保存当前领取的优惠券ID，领取优惠券函数reciveDiscount()用到
      leftCatCodeShow: false, //控制车辆区域自定义键盘的弹出
      rightCatCodeShow: false, //控制车辆号码自定义键盘的弹出
      leftCatCode: "", //录入车信息地区
      rigthCatCode: "", //录入车信息号码
      activeleftCatCodeIndex: -1, //当前点击的车信息地区
      province: [
        "皖",
        "苏",
        "浙",
        "沪",
        "闽",
        "赣",
        "鄂",
        "湘",
        "桂",
        "琼",
        "京",
        "津",
        "冀",
        "晋",
        "新",
        "蒙",
        "辽",
        "吉",
        "黑",
        "川",
        "渝",
        "云",
        "贵",
        "藏",
        "陕",
        "甘",
        "宁",
        "青",
        "鲁",
        "豫",
        "粤",
        "港",
        "澳",
        "台",
        "警",
        "领",
        "使",
        "学",
        "军",
        "WJ"
      ],
      rigthCode: {
        numList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
        EngOne: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
        EngTwo: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
        EngThree: ["Z", "X", "C", "V", "B", "N", "M"],
        CN: ["澳", "港", "警", "领", "学"],
        activeItem: "",
        newRigthCatCode: ""
      }
    };
  },
  computed: {
    nc() {
      Toast("无法进行点击");
    },
    reciveList() {
      return this.list.filter(item => {
        return item.type == 1;
      });
    },
    loginState() {
      return localStorage.getItem("loginState");
    },
    knockList() {
      return this.list.filter(item => {
        return item.type == 2;
      });
    },
    discountList() {
      return this.list.filter(item => {
        return item.type == 3;
      });
    }
  },
  created() {
    let merchantCode = localStorage.getItem("merchantCode") || "";
    if (merchantCode == "") {
      localStorage.setItem("merchantCode", this.$route.query.merchantCode);
    }
    if (
      merchantCode != this.$route.query.merchantCode &&
      this.$route.query.merchantCode != undefined
    ) {
      localStorage.setItem("merchantCode", this.$route.query.merchantCode);
    }
    // if (customerCode == "") {
    //   localStorage.setItem("customerCode", this.$route.query.customerCode);
    // }
    // if(!!localStorage.getItem('customerCode2')){
      if (
        this.$route.query.customerCode != undefined
      ) {
        localStorage.setItem("customerCode2", this.$route.query.customerCode);
        localStorage.setItem("loginState", 1);
      }
       if(this.$route.query.customerCode == undefined||this.$route.query.customerCode==''){
        localStorage.setItem("loginState", 0);
      }
    // }else{
    //   localStorage.setItem("loginState", 0);
    // }
    // if()
    this.getCounstList(); //获取优惠券列表
  },
  mounted() {
    // 屏幕滑动触发右侧分享和回到置顶设置函数
    // window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    ap() {
      Toast("请不要频繁发送验证码");
    },
    getCode() {
      //获取验证码
      let params = {
        customerPhone: this.tel
      };
      this.time = 60;
      let timer = setInterval(() => {
        this.time--;
        // console
        if (this.time == 0) {
          clearInterval(timer);
        }
      }, 1000);
      this.$api.getCode(params).then(res => {});
    },
    async bind() {
      //验证验证码
      let params = {
        merchantCode: localStorage.getItem("merchantCode") || "",
        customerPhone: this.tel, //电话号码
        smsCode: this.code, //验证码
        plateNum: this.leftCatCode + this.rigthCatCode //车牌号
      };
      await this.$api.bind(params).then(res => {
        if (res.code == "10000") {
          localStorage.setItem("customerCode2", res.data.sysCustomerCode);
          localStorage.setItem("loginState", 1);
          this.getCounstList();
          this.sheetCancelBtn(); //登录成功就关闭弹窗
        } else {
          Toast("绑定失败" + res.message);
          localStorage.setItem("loginState", 0);
        }
      });
    },
    // 屏幕滚动判断分享和回到顶面显示
    // windowScroll() {
    //   let scroll =
    //     document.documentElement.scrollTop || document.body.scrollTop;
    //   if (scroll >= 200 && this.rightShow == false) {
    //     this.rightShow = true;
    //   } else if (scroll < 200 && this.rightShow == true) {
    //     this.rightShow = false;
    //   }
    // },
    //获取总优惠券列表
    getCounstList(customerCode) {
      let params = {
        merchantCode: localStorage.getItem("merchantCode"),
        couponName: "",
        type: this.reciveDiscountID,
        sysCustomerCode: localStorage.getItem("customerCode2") || ""
      };
      this.$api.list(params).then(res => {
        res.data.couponList.map(val => {
          if( val.availableDeal!=''){
            val.availableDeal=val.availableDeal.split(',')
          }
        });
        this.merchantInfo=res.data.merchantMap||''
        this.list = res.data.couponList;
      });
    },
    //点击上方功能类型切换
    chooseKind() {
      console.log(`触发tabs类型切换${this.active}`);
    },
    //立即领取
    nowGet(data) {
      // this.reciveDiscountID = data; //保存当前领取的优惠券ID
      //如果已经登录就不需要再弹窗了，直接领取
      if (this.loginState == 1) {
        this.reciveDiscount(3, data); //调用领取优惠券函数
      } else {
        this.popShow = true; //没有登录，底部弹窗并录入信息登录
      }
    },
    //点击取消
    sheetCancelBtn() {
      this.popShow = false;
    },
    sendCode() {
      if (this.tel == "") {
        Toast("请输入手机号");
        return false;
      }
      let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (reg.test(this.tel)) {
      } else {
        Toast("请输入正确的手机号");
        this.tel = "";
        return false;
      }
      this.getCode();
    },
    noCat() {
      this.noCar = true;
      this.leftCatCode = "";
      this.rigthCatCode = "";
      // console.log("点击无车/无牌");
    },
    async confirmButton() {
      if (this.tel == "") {
        Toast("请输入车牌号");
        return false;
      }
      if (this.code == "") {
        Toast("请输入验证码");
        return false;
      }
      // if (this.leftCatCode == "" && this.rigthCatCode == "") {
      //   Toast("请输入车牌号");
      //   return false;
      // }
      await this.bind();
      if (this.reciveDiscountID != "") {
        this.reciveDiscount(3, this.reciveDiscountID); //调用领取优惠券函数
      }
    },
    rightShare() {
      console.log("点击右侧分享按钮");
    },
    backTop() {
      window.scrollTo(0, 0);
      console.log("点击右侧置顶按钮");
    },
    //领取优惠券函数
    reciveDiscount(source, id) {
      let params = {
        merchantCode: localStorage.getItem("merchantCode"),
        sysCustomerCode: localStorage.getItem("customerCode2"),
        source, //优惠券来源
        id //优惠券id
      };
      let that = this;
      this.$api.getCoupons(params).then(res => {
        if (res.code == "10000") {
          // let params2 = {
          //   merchantCode: localStorage.getItem("merchantCode"),
          //   couponName: "",
          //   type: this.reciveDiscountID,
          //   sysCustomerCode: localStorage.getItem("customerCode2")
          // };
          Dialog.alert({
            title: "领取提示",
            message: "领取成功!可在我的券中查看"
          }).then(() => {
            // on close
          });
            // let item;
            // if (res2.code == "10000") {
            //   res2.data.map(val2 => {
            //     if (val2.id == id) {
            //       item = val2;
            //     }
            //   });
            // }
            // // console.log(item,id)
            // that.list.map(val => {
            //   if (val.id == id) {
            //     val.isGet = item.isGet;
            //     val.isHasGet=item.isHasGet
            //   }
            // });
            this.getCounstList()
            this.$nextTick()
        } else {
          Toast(res.message);
        }
      });
    },
    //pop弹窗点击录入车辆区域
    popcatCodeLeft() {
      console.log("popcatCodeLeft");
      this.leftCatCodeShow = true;
    },
    //pop弹窗录入车辆区域点击确认
    leftCatCodeEnsure() {
      console.log("leftCatCodeEnsure", this.activeleftCatCodeIndex);
      this.leftCatCodeShow = false;
      if (this.activeleftCatCodeIndex == -1) {
        this.leftCatCode = "";
      } else {
        this.leftCatCode = this.activeleftCatCodeIndex + "";
      }
      this.popcatCodeRight();
    },
    //pop弹窗点击录入车牌号
    popcatCodeRight() {
      this.rightCatCodeShow = true;
      this.rigthCode.newRigthCatCode = this.rigthCatCode;
      console.log(this.rigthCode.newRigthCatCode);
    },
    //pop弹出单击车牌号各按钮
    rightCatCodeClick(item) {
      let { newRigthCatCode } = this.rigthCode;
      this.rigthCode.activeItem = item;
      if (item == "clear") {
        this.rigthCode.newRigthCatCode = newRigthCatCode.slice(
          0,
          newRigthCatCode.length - 1
        );
      } else {
        //车牌号等于7位就不加了
        if (this.rigthCode.newRigthCatCode.length < 7) {
          this.rigthCode.newRigthCatCode += item;
        }
      }
    },
    //点击车辆号码的确认按钮
    codeEnsure() {
      //深拷贝
      this.rigthCatCode = JSON.parse(
        JSON.stringify(this.rigthCode.newRigthCatCode)
      );
      this.rightCatCodeShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.activeStyle {
  background: #ef3b4f !important;
  color: white;
}
.userImageDiv {
  display: flex;
  align-items: center;

  .userImage {
    height: 80px;
    width: 80px;
    margin: 16px 30px;
  }

  .userName {
    font-size: 28px;
    color: #272727;
  }
}

/deep/ .van-list {
  background-color: #f1f1f1;
}
/deep/ .van-tab__text {
  font-size: 28px;
  color: #272727;
}
/deep/ .van-tab.van-tab--active.van-ellipsis .van-tab__text {
  color: #ef3b4f;
}
/deep/ .van-tabs__wrap.van-hairline--top-bottom {
  height: 116px !important;
}
/deep/ .van-tab.van-ellipsis {
  line-height: 116px;
}
/deep/ .van-tabs__line {
  width: 80px;
  height: 6px;
  background-color: #ef3b4f;
}
/deep/ [class*="van-hairline"]::after {
  border: 0;
}
// .receiveCardD {
//   background: #f1f1f1;

//   .receiveCard {
//     margin: 0 20px;
//     display: flex;
//     position: relative;

//     .circleTop,
//     .circleBottom {
//       position: absolute;
//       left: 178px;
//       background-color: #f0f0f0;
//       height: 20px;
//       width: 40px;
//     }

//     .circleTop {
//       top: 0px;
//       border-bottom-left-radius: 20px;
//       border-bottom-right-radius: 20px;
//     }

//     .circleBottom {
//       bottom: 0px;
//       border-top-left-radius: 20px;
//       border-top-right-radius: 20px;
//     }

//     .moneydiv {
//       height: 240px;
//       width: 190px;
//       border-right: 16px dotted #e1e1e1;
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//       align-items: center;
//       background-color: #ffffff;
//       border-radius: 10px 0 0 10px;

//       .money {
//         .greenChar {
//           color: #27b77c;
//           font-weight: bold;
//           font-size: 45px;
//         }
//         .greenMoney {
//           color: #27b77c;
//           font-weight: bold;
//           font-size: 70px;
//         }
//         .blueMoney {
//           color: blue;
//           font-weight: bold;
//           font-size: 70px;
//         }
//         .blueChar {
//           color: blue;
//           font-weight: bold;
//           font-size: 45px;
//         }
//         .redChar {
//           color: red;
//           font-weight: bold;
//           font-size: 45px;
//         }
//         .redMoney {
//           color: red;
//           font-weight: bold;
//           font-size: 70px;
//         }
//       }

//       .useKinds {
//         color: #7d7d7d;
//         font-size: 26px;
//       }
//     }

//     .content {
//       flex: 1;
//       padding-left: 30px;
//       height: 240px;
//       background: #ffffff;

//       .contentTitle {
//         margin-top: 40px;
//         font-size: 32px;
//         color: #272727;
//       }

//       .remainTime {
//         margin: 30px 0;
//         font-size: 24px;
//         color: #737373;
//       }

//       .notes {
//         display: flex;

//         .rectBox {
//           width: 40px;
//           height: 40px;
//           color: #bc8038;
//           background-color: #feeaa4;
//           border-radius: 5px;
//           text-align: center;
//           line-height: 40px;
//           font-size: 24px;
//           margin-right: 24px;
//         }
//       }
//     }

//     .receiveState {
//       height: 240px;
//       background: #ffffff;
//       display: flex;
//       align-items: center;
//       position: relative;
//       border-radius: 0 10px 10px 0;
//       .recivedImage {
//         height: 96px;
//         width: 96px;
//         position: absolute;
//         top: 0;
//         right: 0;
//       }

//       .nowGet {
//         padding: 0;
//         border: 0;
//         line-height: 50px;
//         text-align: center;
//         height: 50px;
//         width: 140px;
//         border-radius: 50px;
//         font-size: 25px;
//         margin-right: 30px;
//         color: #675400;
//         background-color: yellow;
//       }
//     }
//   }

//   .openDescript {
//     height: 80px;
//     display: flex;
//     justify-content: flex-end;
//     align-items: center;
//     font-size: 24px;
//     color: #4883c0;

//     .openDescriptIcon {
//       width: 14px;
//       height: 25px;
//       margin: 0 50px 0 16px;
//     }
//   }
// }
.sheetCancelBtn {
  height: 36px;
  width: 36px;
  display: block;
  margin: 47px 60px 47px auto;
}
.actionSheetContent {
  padding: 0 50px;
  .actionSheetContentTitle {
    font-size: 34px;
  }
  .inputStyle {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    input {
      font-size: 28px;
      margin-left: 30px;
      color: #272727;
      border: 1px solid #cdcdcd;
      border-radius: 10px;
      height: 90px;
    }
    .phone {
      box-sizing: border-box;
      padding-left: 34px;
      width: 457px;
    }
    .code {
      box-sizing: border-box;
      padding-left: 34px;
      width: 296px;
    }
    // .catNumTwo {
    //   position: relative;
    //   .catNum {
    //     box-sizing: border-box;
    //     padding-left: 34px;
    //     width: 296px;
    //   }
    //   .catNumI {
    //     height: 40px;
    //     position: absolute;
    //     display: inline-block;
    //     top:4px;
    //     left: 128px;
    //     border-left:1px solid #cdcdcd;
    //   }
    // }
    .catNumTwoInput {
      height: 90px;
      display: inline-block;
      border: 1px solid #cdcdcd;
      border-radius: 10px;
      margin-left: 30px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      font-size: 28px;
      color: #2d2d2d;
      .leftInput {
        margin: 0;
        padding-left: 34px;
        box-sizing: border-box;
        width: 94px;
        border: 0;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .rightInput {
        box-sizing: border-box;
        margin-left: 0;
        padding-left: 34px;
        border: 0;
        width: 200px;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .catNumI {
        position: relative;
        top: 2px;
        height: 40px;
        display: inline-block;
        border-left: 1px solid #cdcdcd;
      }
    }
    .inputMethodStyle {
      color: #4883c0;
      font-size: 28px;
      margin-left: 30px;
    }
  }
  button {
    width: 100%;
    height: 90px;
    display: block;
    color: #ffffff;
    font-size: 34px;
    border-radius: 10px;
    background-color: #ef3b4f;
    border: 0;
    margin: 60px 0;
  }
}
.backTop {
  position: fixed;
  top: 45%;
  right: 30px;
  > div {
    height: 84px;
    width: 84px;
    &:first-of-type {
      margin-bottom: 50px;
    }
  }
}
.leftCatCodeContent {
  .contentHead {
    height: 134px;
    background: #ffffff;
  }
  .ensure {
    height: 100px;
    background: #eee;
    display: flex;
    padding: 0 50px;
    justify-content: flex-end;
    align-items: center;
    .ensureBtn {
      font-size: 32px;
      color: #ef3b4f;
    }
  }
  .item {
    background: #eee;
    display: flex;
    flex-wrap: wrap;
    font-size: 32px;
    color: #272727;
    > div {
      height: 82px;
      width: 61px;
      background: white;
      border-radius: 10px;
      margin: 0 0 20px 10px;
      text-align: center;
      line-height: 82px;
    }
    .clear {
      width: 132px;
      display: flex;
      justify-content: center;
      align-items: center;
      .clearIcon {
        width: 60px;
        display: flex;
        align-items: center;
      }
    }
  }
}
.rightCatCodeContent {
  background: #eee;
  padding: 28px 10px;
  > div {
    display: flex;
    justify-content: center;
    > div {
      height: 81px;
      width: 62px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      background: #fff;
      border-radius: 10px;
      margin: 0 5px 20px 5px;
    }
  }

  .EngThree {
    .clear {
      width: 132px;
      display: flex;
      justify-content: center;
      align-items: center;
      .clearIcon {
        width: 60px;
        display: flex;
        align-items: center;
      }
    }
  }
  .CN {
    > div {
      width: 85px;
    }
    .btn {
      width: 203px;
      background: #ef3b4f;
      color: #fff !important;
    }
  }
}
.dis {
  background: #c0c4cc !important;
}
</style>
